.page.page-home {

    position: relative;
    min-height: 100%;
    height: auto;
    background: rgba(12, 28, 49, 1);

    .header-wapper {
        padding: 60px 40px;
    }

    .landing {
        padding: 60px 40px;
        display: flex;
        align-items: center;
        flex-direction: column;
        flex: 1 1 auto;
        span {
            display: flex;
            margin-bottom: 15px;
            text-align: center;
            flex: 1 1 0%;
            font-weight: normal;
            line-height: 1.5;
            word-break: normal;
            font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, btcglyph;
            font-size: 40px;
            text-transform: inherit;
            color: rgb(255, 255, 255);
        }

        p {
            font-weight: normal;
            line-height: 1.5;
            word-break: normal;
            font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, btcglyph;
            font-size: 18px;
            text-align: center;
            text-transform: inherit;
            color: rgba(255, 255, 255, 0.4);
        }

        button {
            margin-top: 80px;
            margin-bottom: 40px;
            display: flex;
            width: 200px;
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            align-items: center;
            font-weight: bold;
            text-transform: uppercase;
            white-space: nowrap;
            cursor: pointer;
            height: 40px;
            font-size: 14px;
            color: rgb(255, 255, 255);
            flex: 1 1 auto;
            border-radius: 1px;
            outline: none;
            border: 0;
            transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
            background: rgb(14, 125, 255);
            &:hover {
                background: rgb(12, 114, 234);
            }
        }

    }

    .products {

        width: 100%;
        height: 120px;
        background: rgb(6,13,19);

    }

    .introduction {
        padding: 60px 40px;
        background: #fff;
        h2 {
            font-weight: normal;
            line-height: 1.5;
            word-break: normal;
            font-size: 30px;
            text-align: left;
            text-transform: inherit;
            color: rgb(16, 25, 34);
            margin: 0;
            padding-bottom: 20px;
            text-align: center;
        }
        .items {
            display: flex;
            width: 100%;
            font-size: 18px;
            line-height: 1.5;
            justify-content: space-between;
            max-width: 1120px;
            flex-wrap: wrap;
            margin: 0 auto;
            
            .item {
                flex: 0 0 300px;
                display: flex;
                flex-direction: column;
                text-align: center;
                padding-top: 60px;
                

                b {
                    font-weight: 300;
                    padding-top: 10px;
                    padding-bottom: 5px;
                }
                span {
                    font-size: 16px;
                    color: rgba(16, 25, 34, 0.4);
                    display: block;
                    padding-bottom: 10px;
                }
                .icon {
                    width: 50px;
                    margin: 0 auto;
                }
                a {
                    cursor: pointer;
                    font-size: 18px;
                    color: rgb(14, 125, 255);
                    text-decoration: underline;
                }
            }
        }
    }

    .footer {

        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        height: 80px;
        flex: 1 1 0%;
        background: rgb(6, 13, 19);
        display: flex;
        flex-direction: row;

        span {
            font-weight: normal;
            line-height: 1.5;
            word-break: normal;
            display: inline;
            text-align: left;
            text-transform: inherit;
            color: rgba(255, 255, 255, 0.4);
            font-size: 10px;
        }

    }


}

@media screen and (min-width: 680px) and (max-width: 980px) { 

    .page.page-home {
        
        .introduction {

            .items {

                justify-content: center;
                .item {
                    flex: 0 0 50%;
                    padding: 30px;
                }

            }

        }

    }

}

@media screen and (max-width: 679px) { 

    .page.page-home {
        
        .introduction {

            .items {
                
                flex-direction: column;
                
                .item {
                    width: 300px;
                    margin: auto;
                }

            }

        }

    }

}